<template>
  <div class="machine-material-history">
    <el-row style="paddingBottom: 0">
      <el-col :span="24">
        <dynForm :info-form="searchForm" :search-tags="searchTags" :select-list="selectList">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleSearch"
          >
            {{ $t("search") }}</el-button
            >
        </dynForm>
      </el-col>
    </el-row>
    <!-- 表单部分 -->
    <el-card>
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import { eqpidnamelist } from '@/api/equipment/eqpbase'
import { getInitList } from '@/api/materialManagement/machineMaterial'
export default {
  name: 'MachineMaterialHistory',
  mixins: [mySetting],
  data() {
    return {
      searchForm: {
        actionType: 0
      },
      searchTags: [
        { label: this.$t('materialCode'), prop: 'materialCode', tag: 'DynInput' },
        { label: this.$t('itemNumber'), prop: 'itemNumber', tag: 'DynInput' },
        { label: this.$t('eqpId'), prop: 'eqpId', tag: 'DynInput' },
        { label: this.$t('operation_similar'), prop: 'actionType', tag: 'DynSelect' }
      ],
      selectList: {
        actionType: [{ id: 0, name: 'all' }, { id: 1, name: this.$t('onBoard') }, { id: 2, name: this.$t('Disembark') }]
      },
      tableColumns: Object.freeze(
        [
          { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
            return (
              <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
            )
          } },
          { prop: 'materialCode', label: this.$t('materialCode') },
          { prop: 'eqpName', label: this.$t('eqpId') },
          { prop: 'materialNo', label: this.$t('itemNumber') },
          { prop: '', label: this.$t('operation_similar'), templete: (_scope) => {
            const type = ['all', this.$t('onBoard'), this.$t('Disembark')]
            return (
              <span>{type[_scope.row.actionType]}</span>
            )
          } },
          { prop: 'creator', label: this.$t('operator') },
          { prop: 'createTime', label: this.$t('operatingTime') },
          { prop: 'currentLength', label: this.$t('currentLength') }
        ]
      ),
      tableLoading: true
    }
  },
  created() {
    this.initList()
    // this.getEqpIdNamelList()
  },
  methods: {
    handleSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    async initList() {
      const res = await getInitList(this.$clearNull({ ...this.searchForm, ...this.listQuery }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    onchangePage(page) {
      this.listQuery = page
      this.initList()
    },
    async getEqpIdNamelList() {
      const res = await eqpidnamelist()
      this.$set(this.selectList, 'eqpId', res.data)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-form {
  padding-top: 10px;
  //     .el-form-item{
  //   margin-bottom: 15px;
  // }
}
</style>
